<template>
  <div class="login-container">

    <div class="floating-element element-1"></div>
    <!-- 添加明亮的星星 -->
    <div class="bright-star star1"></div>
    <div class="bright-star star2"></div>
    <div class="bright-star star3"></div>
    <div class="bright-star star4"></div>
    <div class="bright-star star5"></div>

    <!-- 添加彗星元素 -->
    <div class="comet comet1">
      <div class="comet-body">
        <div class="comet-tail"></div>
      </div>
    </div>
    <div class="comet comet2">
      <div class="comet-body">
        <div class="comet-tail"></div>
      </div>
    </div>
    <div class="comet comet3">
      <div class="comet-body">
        <div class="comet-tail"></div>
      </div>
    </div>
    <div class="split-layout">
      <!-- 左侧欢迎区域 -->
      <div class="welcome-section">
        <div class="welcome-content">
          <div class="brand-logo">
            <i class="fa-solid fa-cloud-moon"></i>
          </div>
          <h1>月半猫网盘</h1>
          <p>在云端星河中，守护您的每一份数字足迹</p>
          <div class="stats-panel">
            <!-- 基本数据行 -->
            <div class="stats-row">
              <div class="stat-item">
                <div class="stat-value glow">99.9%</div>
                <div class="stat-name">安全保障</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">2TB</div>
                <div class="stat-name">免费空间</div>
              </div>
            </div>

            <!-- 用户数据行 -->
            <div class="stats-row">
              <div class="stat-item">
                <div class="stat-value">2800万+</div>
                <div class="stat-name">注册用户</div>
              </div>
              <div class="stat-item">
                <div class="stat-value glow">98.7%</div>
                <div class="stat-name">用户满意度</div>
              </div>
            </div>
          </div>

          <!-- 功能列表行 -->
          <div class="features-row">
            <div class="features-title">
              <i class="fa-solid fa-star"></i> 核心功能
            </div>
            <div class="features-list">
              <div class="feature-tag">
                <i class="fa-solid fa-lock"></i> 端到端加密
              </div>
              <div class="feature-tag">
                <i class="fa-solid fa-share-nodes"></i> 跨设备同步
              </div>
              <div class="feature-tag">
                <i class="fa-solid fa-clock-rotate-left"></i> 历史版本
              </div>
              <div class="feature-tag">
                <i class="fa-solid fa-shield-halved"></i> 安全认证
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录/注册表单区域优化 -->
      <div class="form-section">
        <div class="form-container">
          <div class="form-header">
            <h2>{{ activeTab === 'login' ? '账户登录' : '创建账户' }}</h2>
          </div>

          <!-- 添加API错误消息提示框 -->
          <div v-if="showApiError" class="api-error-alert">
            <i class="fa-solid fa-circle-exclamation"></i>
            <span>{{ apiErrorMessage }}</span>
            <button @click="showApiError = false" class="close-alert">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>

          <!-- 优化表单切换区 -->
          <div class="tabs-container">
            <button @click="activeTab = 'login'" :class="['tab-button', activeTab === 'login' ? 'active' : '']">
              登录
            </button>
            <button @click="activeTab = 'register'" :class="['tab-button', activeTab === 'register' ? 'active' : '']">
              注册
            </button>
            <!-- 添加彩色动态线条 -->
            <div class="tab-indicator" :class="activeTab === 'login' ? 'indicator-login' : 'indicator-register'"></div>
          </div>

          <!-- 表单内容容器优化 -->
          <div class="form-content">
            <transition name="form-slide" mode="out-in">
              <LoginForm v-if="activeTab === 'login'" key="login" class="form-transition" @login="handleLogin" />
              <RegisterForm v-else key="register" class="form-transition" @show-terms="showTermsModal = true"
                @show-privacy-policy="showPrivacyModal = true" @register="handleRegister" />
            </transition>
          </div>

          <!-- 添加到底部的社交图标 -->
          <div class="bottom-social-icons">
            <a href="#" class="social-icon"><i class="fa-brands fa-github"></i></a>
            <a href="#" class="social-icon"><i class="fa-brands fa-weixin"></i></a>
            <a href="#" class="social-icon"><i class="fa-brands fa-qq"></i></a>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <TermsModal v-if="showTermsModal" @close="showTermsModal = false" />
    <PrivacyPolicyModal v-if="showPrivacyModal" @close="showPrivacyModal = false" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LoginForm from './LoginForm.vue'
import RegisterForm from './RegisterForm.vue'
import TermsModal from '@/components/TermsModal.vue'
import PrivacyPolicyModal from '@/components/PrivacyPolicyModal.vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

// 登录表单数据接口
interface LoginFormData {
  email: string;
  password: string;
  remember?: boolean;
}

// 注册表单数据接口
interface RegisterFormData {
  username: string;
  email: string;
  password: string;
}

// 在脚本开头定义后端URL作为常量
const backendUrl = 'http://localhost:8080';
const activeTab = ref('login')
const showTermsModal = ref(false)
const showPrivacyModal = ref(false)
const router = useRouter()

// 添加错误提示状态
const apiErrorMessage = ref('')
const showApiError = ref(false)

// 更新登录处理函数，添加API请求
const handleLogin = async (formData: LoginFormData) => {
  try {
    // 发送登录请求到API
    const response = await axios.post(`${backendUrl}/user/login`, {
      username: formData.email,
      password: formData.password
    })

    // 处理成功响应
    if (response.data.code === 1) {
      // 保存用户ID和token到localStorage
      localStorage.setItem('userid', response.data.data.userId)
      localStorage.setItem('token', response.data.data.token)
      
      // 跳转到仪表板
      router.push('/dashboard')
    } else {
      // 显示错误消息
      apiErrorMessage.value = response.data.msg || '登录失败，请检查您的凭据'
      showApiError.value = true
    }
  } catch (error) {
    console.error('登录请求失败:', error)
    apiErrorMessage.value = '登录请求失败，请稍后再试'
    showApiError.value = true
  }
}

// 更新注册处理函数
const handleRegister = async (formData: RegisterFormData) => {
  try {
    const response = await axios.post(`${backendUrl}/user/register`, {
      username: formData.username,
      password: formData.password,
      email: formData.email
    });

    if (response.data.code === 1) {
      activeTab.value = 'login';
      alert('注册成功！请登录您的账户。');
    } else {
      apiErrorMessage.value = response.data.msg || '注册失败，请稍后再试';
      showApiError.value = true;
    }
  } catch (error) {
    console.error('注册请求失败:', error);
    apiErrorMessage.value = '注册请求失败，请稍后再试';
    showApiError.value = true;
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 添加浮动装饰元素 */
.floating-element {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.5;
  z-index: 0;
}

.login-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000; /* 替换原有渐变背景为纯黑 */
  padding: 2rem;
  box-shadow:
    inset 0 0 50px rgba(134, 3, 174, 0.15),
    inset 0 0 100px rgba(134, 3, 174, 0.1),
    0 0 80px rgba(134, 3, 174, 0.1);
  animation: borderGlow 8s infinite alternate;
}

/* 修改边缘发光动画为更暗的紫色 */
@keyframes borderGlow {
  0% {
    box-shadow:
      inset 0 0 50px rgba(134, 3, 174, 0.1),
      inset 0 0 100px rgba(134, 3, 174, 0.05),
      0 0 80px rgba(134, 3, 174, 0.05);
  }
  50% {
    box-shadow:
      inset 0 0 60px rgba(134, 3, 174, 0.15),
      inset 0 0 120px rgba(134, 3, 174, 0.1),
      0 0 100px rgba(134, 3, 174, 0.1);
  }
  100% {
    box-shadow:
      inset 0 0 50px rgba(134, 3, 174, 0.1),
      inset 0 0 100px rgba(134, 3, 174, 0.05),
      0 0 80px rgba(134, 3, 174, 0.05);
  }
}

/* 增加额外的边界辉光效果 */
.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(1px 1px at 25% 15%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 50% 40%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 75% 55%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 35% 65%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 65% 10%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 85% 35%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 10% 85%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 50% 75%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 30% 90%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2.5px 2.5px at 85% 80%, rgba(255, 255, 255, 0.9), transparent);
  background-repeat: repeat;
  background-size: 500px 500px;
  opacity: 1;
  z-index: 0;
  animation: glowPulse 10s infinite alternate;
}

@keyframes glowPulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}

/* 添加星空背景 */
.login-container::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(10, 30, 70, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(20, 40, 80, 0.2) 0%, transparent 50%);
  z-index: -1;
}

/* 添加几个明亮的星星 */
.bright-star {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px rgba(70, 131, 255, 0.8),
    0 0 40px rgba(70, 131, 255, 0.6),
    0 0 50px rgba(70, 131, 255, 0.4);
  animation: brightStarTwinkle 3s infinite ease-in-out;
}

.star1 {
  width: 3px;
  height: 3px;
  top: 20%;
  left: 10%;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  animation-delay: 0s;
}

.star2 {
  width: 2px;
  height: 2px;
  top: 15%;
  left: 35%;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
  animation-delay: 0.3s;
}

.star3 {
  width: 4px;
  height: 4px;
  top: 25%;
  right: 40%;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.9);
  animation-delay: 0.7s;
}

.star4 {
  width: 3px;
  height: 3px;
  top: 60%;
  left: 20%;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  animation-delay: 1.1s;
}

.star5 {
  width: 3px;
  height: 3px;
  bottom: 20%;
  right: 15%;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  animation-delay: 1.5s;
}

/* 明亮星星的闪烁动画 */
@keyframes brightStarTwinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 霓虹灯效果动画 - 调整为星空主题 */
@keyframes neonGlow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(100, 150, 255, 0.2),
      0 0 20px rgba(100, 150, 255, 0.1);
  }

  50% {
    box-shadow: 0 0 15px rgba(100, 150, 255, 0.3),
      0 0 30px rgba(100, 150, 255, 0.15);
  }
}

.split-layout {
  display: flex;
  width: 900px;
  height: 730px;
  background: rgba(0, 0, 0, 0.6); /* 加深背景透明度 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 15px rgba(134, 3, 174, 0.1),
    0 0 30px rgba(134, 3, 174, 0.05),
    0 0 2px rgba(134, 3, 174, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(134, 3, 174, 0.05);
  position: absolute;
  animation: cardGlow 6s infinite alternate;
  z-index: 10;
}

/* 修改卡片发光动画为紫色 */
@keyframes cardGlow {
  0% {
    box-shadow:
      0 0 15px rgba(134, 3, 174, 0.15),
      0 0 30px rgba(134, 3, 174, 0.1),
      0 0 2px rgba(134, 3, 174, 0.2);
  }

  50% {
    box-shadow:
      0 0 20px rgba(134, 3, 174, 0.2),
      0 0 40px rgba(134, 3, 174, 0.15),
      0 0 3px rgba(134, 3, 174, 0.25);
  }

  100% {
    box-shadow:
      0 0 15px rgba(134, 3, 174, 0.15),
      0 0 30px rgba(134, 3, 174, 0.1),
      0 0 2px rgba(134, 3, 174, 0.2);
  }
}

/* 光晕效果的内部渐变修改为紫色 */
.split-layout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 25% 25%, rgba(134, 3, 174, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(134, 3, 174, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* 左侧欢迎区域 */
.welcome-section {
  width: 50%;
  height: 100%;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
      rgba(20, 30, 60, 0.3) 0%,
      rgba(30, 40, 80, 0.3) 100%);
  position: relative;
  overflow: hidden;
}

/* 优化欢迎内容部分 */
.welcome-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 90%;
  animation: fadeInUp 1s ease-out;
  z-index: 1;
}

/* 品牌LOGO样式增强 */
.brand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background: rgba(30, 30, 50, 0.3);
  border-radius: 50%;
  margin-bottom: 1rem;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 30px rgba(120, 0, 255, 0.3);
  animation: logoPulse 5s infinite alternate ease-in-out;
}

.brand-logo i {
  font-size: 2rem;
  color: white;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

@keyframes logoPulse {
  0% {
    box-shadow: 0 0 30px rgba(120, 0, 255, 0.3);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 40px rgba(0, 150, 255, 0.4);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 30px rgba(255, 0, 150, 0.3);
    transform: scale(1);
  }
}

.welcome-content h1 {
  font-size: 2.2rem;
  /* 稍微减小标题大小 */
  margin-bottom: 0.75rem;
  font-weight: bold;
  background: linear-gradient(90deg, #ffffff, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.welcome-content p {
  margin-bottom: 1.5rem;
  /* 减小下边距 */
  line-height: 1.5;
  opacity: 0.9;
  font-size: 1.1rem;
  max-width: 90%;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* 轻盈浮动的统计面板 */
.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* 统一设置为15px的间隔 */
  margin-top: 20px;
  margin-bottom: 15px;
  /* 与功能区域保持一致的间距 */
  width: 100%;
}

/* 基本数据行 */
.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(20, 20, 30, 0.35);
  border-radius: 10px;
  padding: 10px 15px;
  border: 1px solid rgba(120, 0, 255, 0.08);
  box-shadow: 0 0 15px rgba(80, 0, 150, 0.1);
  backdrop-filter: blur(3px);
  position: relative;
  transition: all 0.3s;
}

.stats-row:hover {
  background: rgba(30, 30, 45, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(120, 0, 255, 0.15);
}

/* 统计项 */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  position: relative;
  padding: 0 10px;
}

/* 添加分隔线 */
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(to bottom,
      transparent,
      rgba(120, 0, 255, 0.2),
      rgba(120, 0, 255, 0.3),
      rgba(120, 0, 255, 0.2),
      transparent);
}

/* 调整统计值和名称的间距 */
.stat-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 0 10px rgba(120, 0, 255, 0.5);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-name {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.3px;
}

/* 强化发光效果 */
.stat-value.glow {
  animation: valueGlow 3s infinite alternate;
  background: linear-gradient(90deg, #ffffff, #d8c5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes valueGlow {
  0% {
    filter: brightness(1) drop-shadow(0 0 10px rgba(120, 0, 255, 0.5));
  }

  50% {
    filter: brightness(1.1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
  }

  100% {
    filter: brightness(1) drop-shadow(0 0 10px rgba(0, 150, 255, 0.5));
  }
}

/* 功能列表行 */
.features-row {
  background: rgba(20, 20, 30, 0.35);
  border-radius: 10px;
  padding: 12px 15px;
  border: 1px solid rgba(120, 0, 255, 0.08);
  box-shadow: 0 0 15px rgba(80, 0, 150, 0.1);
  backdrop-filter: blur(3px);
  transition: all 0.3s;
}

.features-row:hover {
  background: rgba(30, 30, 45, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(120, 0, 255, 0.15);
}

.features-title {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.features-title i {
  margin-right: 6px;
  color: rgb(160, 120, 255);
}

/* 特性列表 */
.features-list {
  display: flex;
  gap: 8px;
}

.feature-tag {
  background: rgba(30, 30, 50, 0.4);
  border-radius: 50px;
  padding: 5px 10px;
  font-size: 0.75rem;
  color: white;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.feature-tag i {
  font-size: 0.7rem;
  margin-right: 5px;
  color: rgb(180, 120, 255);
}

.feature-tag:hover {
  background: rgba(120, 0, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(120, 0, 255, 0.3);
}

/* 右侧表单部分 */
.form-section {
  width: 50%;
  height: 100%;
  padding: 25px 33px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(15, 15, 25, 0.3);
  position: relative;
}

.form-container {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  gap: 1rem;
}

/* 为表单标题添加霓虹效果 */
.form-header h2 {
  margin-bottom: 1rem;
  text-align: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(120, 0, 255, 0.5);
  animation: neonTextGlow 4s infinite ease-in-out alternate;
}

@keyframes neonTextGlow {
  0% {
    text-shadow: 0 0 10px rgba(255, 100, 200, 0.5);
    color: rgba(255, 255, 255, 0.9);
  }

  50% {
    text-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
    color: rgba(240, 255, 255, 1);
  }

  100% {
    text-shadow: 0 0 10px rgba(200, 100, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
  }
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transition: all 0.2s;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.tabs-container {
  display: flex;
  position: relative;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.tab-button {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 1;
  letter-spacing: 0.5px;
  flex: 1;
  text-align: center;
}

.tab-button:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* 彩色指示器线条修复 */
.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 50px; /* 固定宽度 */
  background: linear-gradient(90deg, #4F46E5, #7C3AED, #8B5CF6);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 添加left属性的过渡 */
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
  animation: gradientShift 3s infinite alternate;
  transform: translateX(-50%); /* 保持居中 */
}

.indicator-login {
  left: 25%; /* 登录标签的中心位置 */
}

.indicator-register {
  left: 75%; /* 注册标签的中心位置 */
}

@keyframes gradientShift {
  0% {
    background: linear-gradient(90deg, #4F46E5, #7C3AED, #8B5CF6);
  }
  50% {
    background: linear-gradient(90deg, #7C3AED, #8B5CF6, #C026D3);
  }
  100% {
    background: linear-gradient(90deg, #8B5CF6, #C026D3, #DB2777);
  }
}

/* 确保表单内容容器有足够高度 */
.form-content {
  position: relative;
  width: 100%;
  min-height: 380px; /* 增加最小高度 */
  display: flex;
  flex-direction: column;
}

.form-transition {
  width: 100%;
  height: 100%;
  /* 确保填充整个容器 */
}


/* 响应式优化 */
@media (max-width: 900px) {
  .split-layout {
    width: 95%;
    max-width: 600px;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
  }

  .welcome-section,
  .form-section {
    width: 100%;
    padding: 2rem;
  }

  .welcome-section {
    padding: 2rem;
    max-height: 200px;
  }

  .form-section {
    flex: 1;
    min-height: 450px;
  }
}

@media (max-width: 500px) {
  .form-section {
    padding: 1.5rem;
  }

  .tabs-container {
    margin-top: -0.5rem;
  }

  .social-icon {
    width: 36px;
    height: 36px;
  }
}

/* 调整底部社交图标的位置 */
.bottom-social-icons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.social-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(30, 30, 50, 0.6);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(128, 90, 213, 0.3);
}

.social-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg,
    #ff00e6, #00c3ff, #ff00e6);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(8px);
}

.social-icon:hover {
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-color: transparent;
}

.social-icon:hover::before {
  opacity: 1;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    filter: hue-rotate(0deg) blur(8px);
  }
  100% {
    filter: hue-rotate(360deg) blur(8px);
  }
}

/* 添加星空滑动动画 */
@keyframes slideStars {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(5deg);
  }
}

/* 添加彗星 */
.comet {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.comet1 {
  top: 15%;
  left: -100px;
  animation: cometMove1 15s infinite ease-out;
  animation-delay: 1s;
}

.comet2 {
  top: 30%;
  left: -100px;
  animation: cometMove2 20s infinite ease-out;
  animation-delay: 8s;
}

.comet3 {
  top: 60%;
  left: -100px;
  animation: cometMove3 12s infinite ease-out;
  animation-delay: 17s;
}

/* 彗星的核心和尾巴 */
.comet-body {
  width: 6px;  /* 增大核心尺寸 */
  height: 6px;
  background: white;
  border-radius: 50%;
  position: relative;
  box-shadow:
    0 0 15px white,  /* 增强光晕效果 */
    0 0 30px white,
    0 0 60px white;
}

.comet-tail {
  position: absolute;
  top: 50%;
  right: 3px;  /* 调整尾巴起始位置 */
  width: 100px;  /* 加长尾巴 */
  height: 3px;  /* 加粗尾巴 */
  background: linear-gradient(to right,
    rgba(255, 255, 255, 1),  /* 提高不透明度 */
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.5),
    transparent);
  transform: translateY(-50%);
  filter: blur(1px);  /* 添加轻微模糊使过渡更自然 */
}

/* 彗星移动动画 */
@keyframes cometMove1 {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(15deg);
  }

  10% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  70% {
    opacity: 0;
    transform: translateX(calc(100vw + 200px)) translateY(100px) rotate(15deg);
  }

  100% {
    opacity: 0;
    transform: translateX(calc(100vw + 200px)) translateY(100px) rotate(15deg);
  }
}

@keyframes cometMove2 {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(25deg);
  }

  10% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  70% {
    opacity: 0;
    transform: translateX(calc(100vw + 250px)) translateY(150px) rotate(25deg);
  }

  100% {
    opacity: 0;
    transform: translateX(calc(100vw + 250px)) translateY(150px) rotate(25deg);
  }
}

@keyframes cometMove3 {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(10deg);
  }

  15% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  75% {
    opacity: 0;
    transform: translateX(calc(100vw + 300px)) translateY(50px) rotate(10deg);
  }

  100% {
    opacity: 0;
    transform: translateX(calc(100vw + 300px)) translateY(50px) rotate(10deg);
  }
}


@keyframes neonButtonPulse {
  0% {
    box-shadow:
      0 0 10px rgba(120, 0, 255, 0.3),
      0 0 20px rgba(120, 0, 255, 0.2);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    filter: hue-rotate(0deg);
  }

  50% {
    box-shadow:
      0 0 15px rgba(255, 0, 140, 0.4),
      0 0 30px rgba(255, 0, 140, 0.2);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
    filter: hue-rotate(90deg);
  }

  100% {
    box-shadow:
      0 0 10px rgba(0, 200, 255, 0.3),
      0 0 20px rgba(0, 200, 255, 0.2);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    filter: hue-rotate(180deg);
  }
}

@keyframes borderRotate {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

/* 修改 API 错误提示框样式为固定在页面顶部 */
.api-error-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  display: flex;
  align-items: center;
  background: rgba(30, 30, 40, 0.95);
  padding: 0.85rem 1.25rem;
  border-radius: 8px;
  border-left: 3px solid #ff6b6b;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 1000;
  animation: slideDown 0.3s ease-out;
}

.api-error-alert i {
  color: #ff6b6b;
  margin-right: 0.75rem;
  font-size: 1.1rem;
}

.api-error-alert span {
  flex: 1;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
}

.close-alert {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-alert:hover {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.floating-element {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.5;
  z-index: 0;
}

/* 将元素1改为半月猫 */
.element-1 {
  width: 150px;
  height: 150px;
  /* 创建半月效果 */
  background: radial-gradient(circle at 30% 50%,
    rgba(255, 253, 230, 0.95) 0%,
    rgba(255, 236, 179, 0.85) 20%,
    rgba(255, 220, 115, 0.7) 40%,
    rgba(255, 205, 0, 0.5) 60%,
    transparent 80%);
  /* 修改定位到右上角 */
  position: absolute;
  top: 5%;  /* 距离顶部5% */
  right: 5%;  /* 距离右侧5% */
  filter: blur(2px);
  box-shadow:
    0 0 30px rgba(255, 215, 115, 0.6),
    0 0 60px rgba(255, 180, 50, 0.3);
  animation: moonGlow 10s infinite ease-in-out;
  overflow: visible;
}

/* 调整猫咪剪影位置 */
.element-1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30,40 C30,30 45,25 50,35 C55,25 70,30 70,40 C70,40 72,20 80,15 C70,25 75,40 75,40 C75,55 65,70 50,70 C35,70 25,55 25,40 C25,40 30,25 20,15 C28,20 30,40 30,40 Z M40,40 C42,38 48,38 50,40 M50,40 C52,38 58,38 60,40 M45,50 L45,55 M55,50 L55,55 M45,60 C45,65 55,65 55,60' fill='%23000' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: center 5px;
  transform: rotate(10deg);
  top: -10px;
  right: -15px;
  z-index: 2;
}

/* 用于形成半月的伪元素 */
.element-1::after {
  content: '';
  position: absolute;
  width: 95px;
  height: 150px;
  background: #000;
  border-radius: 50%;
  top: 0;
  right: -25px;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.7);
}

/* 月亮特有的光晕动画 */
@keyframes moonGlow {

  0%,
  100% {
    box-shadow: 0 0 30px rgba(200, 220, 255, 0.6);
  }

  50% {
    box-shadow: 0 0 50px rgba(200, 220, 255, 0.8);
  }
}


</style>
